<template>
  <div id="codingPage-outer-box">
    <a-layout style="height: 90vh">
      <a-layout-sider
        style="width: 50%; min-width: 20%"
        :resize-directions="['right']"
      >
        <a-tabs>
          <a-tab-pane key="content">
            <template #title>
              <icon-calendar />
              题目
            </template>
            <h2>{{ questionInfo.title }}</h2>
            <a-tag
              style="
                margin: 0px 5px 5px;
                background-color: #01a228;
                color: #fff;
              "
              v-for="tag in questionInfo.tags"
              :key="tag"
              >{{ tag }}
            </a-tag>
            <a-descriptions :data="limitInfo" layout="inline-horizontal" />
            <MarkdownViewer :value="questionInfo?.content" />
          </a-tab-pane>
          <a-tab-pane key="resolve" disabled>
            <template #title>
              <icon-clock-circle />
              题解
            </template>
            Content of Tab Panel 2
          </a-tab-pane>
          <a-tab-pane key="answer">
            <template #title>
              <icon-user />
              参考答案
            </template>
            {{ questionInfo?.answer }}
          </a-tab-pane>
          <a-tab-pane key="history">
            <template #title>
              <icon-user />
              提交记录
            </template>
            <p v-for="s in curSubmitList" :key="s.id">
              <a-tag v-if="s.judgeInfo.message == '成功'" color="#50B142"
                >成功
              </a-tag>
              <a-tag v-else color="#E24F48">{{ s.judgeInfo.message }}</a-tag>

              <a-tag style="margin: 0 15px">
                <template #icon>
                  <icon-check-circle-fill />
                </template>
                {{
                  s.createTime.substring(0, 10) +
                  " " +
                  s.createTime.substring(11, 19)
                }}
              </a-tag>
              <a-button
                type="primary"
                @click="
                  codeVisible = true;
                  showCode = s.code;
                "
                >查看代码
              </a-button>
            </p>
          </a-tab-pane>
        </a-tabs>
        <a-drawer
          :width="340"
          @ok="codeVisible = false"
          @cancel="codeVisible = false"
          :visible="codeVisible"
          unmountOnClose
        >
          {{ showCode }}
        </a-drawer>
      </a-layout-sider>
      <a-layout-content>
        <div style="height: 100%">
          <div
            style="height: 9%; display: flex; justify-content: space-between"
          >
            <span style="margin: 5px 10px">
              编程语言:
              <a-select
                v-model="submitData.language"
                :style="{ width: '320px' }"
                placeholder="编程语言"
              >
                <a-option>java</a-option>
                <a-option disabled>C++(暂时不支持)</a-option>
                <a-option disabled>Python(暂时不支持)</a-option>
              </a-select>
            </span>
            <a-button
              @click="submitCode"
              size="large"
              status="success"
              type="primary"
            >
              提交
            </a-button>
          </div>
          <CodeEditor
            :text="submitData.code"
            :handle-change="handleChange"
            :language="submitData.language"
            style="width: 100%; height: 91%"
          />
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import {
  QuestionControllerService,
  type QuestionSubmitAddRequest,
  QuestionSubmitControllerService,
} from "../../generated";
import { onBeforeMount, ref } from "vue";
import { Message } from "@arco-design/web-vue";
import MarkdownViewer from "@/components/MarkdownViewer.vue";
import CodeEditor from "@/components/CodeEditor.vue";

let route = useRoute();

let id = route.params.id;
let showCode = ref("");
let curSubmitList = ref([]);

let limitInfo = ref();

const questionInfo = ref({
  content: "",
  answer: "",
  judgeConfig: [{}],
});
const codeVisible = ref(false);

let getQuestionByID = async () => {
  let res = await QuestionControllerService.getQuestionVoByIdUsingGet(id);
  if (res.code === 0) {
    questionInfo.value = res.data;
    console.log(questionInfo.value);
    limitInfo.value = [
      {
        label: "时间限制",
        value: res.data.judgeConfig?.timeLimit,
      },
      {
        label: "空间限制",
        value: res.data.judgeConfig?.memoryLimit,
      },
      {
        label: "堆栈限制",
        value: res.data.judgeConfig?.stackLimit,
      },
    ];
  } else {
    Message.error(res.message);
  }
};

onBeforeMount(() => {
  getQuestionByID();
  getCurSubmitList();
});

let submitData = ref({
  code:
    "public class Main {\n" +
    "    public static void main(String[] args) {\n" +
    "\n" +
    "    }\n" +
    "}",
  language: "java",
  questionId: id,
});

let handleChange = (v: string) => {
  submitData.value.code = v;
};

let submitCode = async () => {
  console.log(submitData.value);
  let res = await QuestionSubmitControllerService.doQuestionSubmitUsingPost(
    submitData.value as QuestionSubmitAddRequest
  );
  if (res.code === 0) {
    Message.success("提交成功");
  } else {
    Message.error(res.message);
  }
};

let getCurSubmitList = async () => {
  await QuestionSubmitControllerService.listQuestionSubmitByPageUsingPost({
    questionId: id,
  }).then(
    (res) => {
      if (res.code === 0) {
        res.data.records.forEach((t) => {
          if (t.questionId === id && t.code !== "您无权查看该用户的代码") {
            curSubmitList.value.push(t);
          }
        });
        console.log("提交记录:", curSubmitList.value);
      } else {
        Message.error(res.message);
      }
    },
    (err) => {
      console.log(err);
    }
  );
};
</script>

<style scoped></style>
